<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container,
        ul {
            font-size: 0;
        }

        .container {
            width: 900px;
            display: flex;
            flex-wrap: wrap;
        }

        .mid {
            width: 430px;
            height: 430px;
            border: 1px solid;
            position: relative;
        }

        .large {
            width: 430px;
            height: 430px;
            border: 1px solid;
            margin-left: 20px;
        }

        ul {
            list-style: none;
            width: 205px;
            display: flex;
            margin: 20px 0;
            padding: 0;
        }

        li {
            border: 1px solid;
            margin-right: 10px;
        }

        i {
            display: block;
            width: 231px;
            height: 231px;
            background-color: rgba(0, 255, 0, .3);
            position: absolute;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 左上中图 -->
        <div class="mid" id='mid'>
            <!-- 矩形 -->
            <i class="none" id='square'></i>
        </div>
        <!-- 右侧大图 -->
        <div class="large none" id='lag'></div>
    </div>
    <!-- 下小图 -->
    <ul id='ul'></ul>

    <script>
        const small_arr = ["./点击图片/小图（1）.jpg", "./点击图片/小图（2）.jpg", "./点击图片/小图（3）.jpg"];
        const middle_arr = ["./点击图片/大图（1）.jpg", "./点击图片/大图（2）.jpg", "./点击图片/大图（3）.jpg"];
        const large_arr = ["./点击图片/巨大图（1）.jpg", "./点击图片/巨大图（2）.jpg", "./点击图片/巨大图（3）.jpg"];


        function render() {
            ul.innerHTML = small_arr.map((item, index) => `<li><img src='${item}' data-id="${index}"></li>`).join('');
            mid.style.backgroundImage = `url("${middle_arr[0]}")`
            lag.style.backgroundImage = `url("${large_arr[0]}")`

        }
        render()
        ul.onmousemove = function (event) {
            if (event.target.nodeName == 'IMG') {
                let i = event.target.dataset.id;
                mid.style.backgroundImage = `url("${middle_arr[i]}")`
                lag.style.backgroundImage = `url("${large_arr[i]}")`

            }
        }

        mid.onmouseenter = function () {
            square.classList.remove('none');
            lag.classList.remove('none');
        }
        mid.onmouseleave = function () {
            square.classList.add('none');
            lag.classList.add('none');
        }
        mid.onmousemove = function (event) {
            let x = event.clientX - mid.offsetLeft - square.offsetWidth / 2;
            let y = event.clientY - mid.offsetTop - square.offsetHeight / 2;
            x < 0 ? x = 0 : '';
            y < 0 ? y = 0 : '';

            if (x > mid.offsetWidth - square.offsetWidth) {
                x = mid.offsetWidth - square.offsetWidth;
            }
            if (y > mid.offsetHeight - square.offsetHeight) {
                y = mid.offsetHeight - square.offsetHeight;
            }
            square.style.cssText = `
                left: ${x}px;
                top: ${y}px;
            `;
            lag.style.cssText += `
            background-position: ${-x * 800 / 430}px ${-y * 800 / 430}px;
            `
        }
    </script>
</body>

</html>